<!--
 * @Author: your name
 * @Date: 2021-08-16 15:00:00
 * @LastEditTime: 2021-08-22 17:30:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \杰普基地实训\student's note\网易严选复写\网易严选首页.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选</title>
  <!-- 引入CSS -->
  <link rel="stylesheet" href="./网易严选首页.css">
  <!-- 引入icon字体图标 -->
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2760998_660lu6vmz49.css">
  <!-- 人气推荐css-->
  <style>
    html,
    body{
        width: 1250px;
        margin: 0;
        padding: 0;
    }

    .header{
        margin-top: 60px;
        padding-top: 60px;
    }

    .popularity{
        margin-bottom: 60px;
        height: 780px;
        background-color: antiquewhite;
    }

    .name{
        margin: 0px 20px 0px 100px;
        padding-top: 60px;
        font-size: 28px;
        display: inline-block;
    }

    .name:hover{
        color: rgb(0, 255, 157);
        cursor: pointer;
    }

    .headerLeft{
        display: inline-block;
        margin: 10px 20px 10px 20px; 
        padding-left: 10px;
        padding-right: 10px;
    }

    .headerLeft:hover{
        color: rgb(0, 255, 157);
        cursor: pointer;
    }
    .checked{
        color: rgb(0, 255, 157);
        border-bottom: 2px solid crimson;
    }
    .headerRight{
        margin-top: 10px;
        margin-right: 60px;
        display: inline-block;
        float: right;
    }
    
    .headerRight:hover{
        color: rgb(0, 255, 157);
        cursor: pointer;
    }

    .headerRight,.headerLeft{
        font-size: 14px;
    }

    #productItemFirst{
        margin-left: 0px;
        width: 390px;
        height: 570px;
    }

    #productItemFirst>img{
        border: 1px solid #b1a07d;
    }

    #productItemFirst>img:last-child{
        margin: 40px 35px;
    }

    #productItemFirst>img:last-child:hover{
        width: 336px;
    }

    .productItem{
        margin-left: 10px;
        width: 223px;
        height: 280px;
        color: rgb(3, 3, 3);
        float: left;
    }

    .product{
        margin-left: 100px;
    }

    .product>:nth-child(5),.product>:nth-child(6),.product>:nth-child(7){
        margin-top: 10px;
    }
</style>
<!-- 人气推荐css结束-->
</head>

<body>
  <!-- 网页头部 -->
  <header>
    <div class="top">
      <div class="left">
        <i class="iconfont icon-icon-24-tongzhi"></i>
        <span>由于受到疫情影响，我们将使用无人机配送</span>
      </div>
      <div class="right">
        <!-- 头部菜单栏 -->
        <ul>
          <li><a href="">登录/注册<i class="iconfont icon-icon"></i></a></li>
          <li><a href="">我的订单<i class="iconfont icon-dingdan"></i></a></li>
          <li><a href="">会员<i class="iconfont icon-huiyuan"></i></a></li>
          <li><a href="">甄选家<i class="iconfont icon-denglu"></i></a></li>
          <li><a href="">企业采购<i class="iconfont icon-gaiicon-"></i></a></li>
          <li><a href="">客户服务<i class="iconfont icon-kefu"></i></i></a></li>
          <li><a href="">APP<i class="iconfont icon-shouji"></i></a></li>
        </ul>
        <!-- 头部菜单栏结束 -->
      </div>
    </div>
  </header>
  <!-- 网页头部结束 -->

  <!-- 主体 -->
  <section>
    <!-- 头部 -->
    <div class="middle">
      <div class="logo">
        <img src="./images/logopng.png" alt="">
      </div>
      <div class="search">
        <div class="search_top">
          <input type="text">
          <span class="search_text"><i class="iconfont icon-weibiaoti-1_sousuo"></i>搜索</span>
        </div>
        <div class="search_bottom">
          <a href="">七夕礼物</a>
        </div>
      </div>
      <div class="shopcar">
        <div class="car">
          <span class="shopcar_text"><i class="iconfont icon-xiazai49"></i>购物车</span>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="nav">
      <div class="list">
        <ul>
          <li>
            <a href="">首页</a>
          </li>
          <li>
            <a href="">居家生活</a>
            <div class="second" style="width: 340px;    height: 350px;    margin-bottom: 100px;">
              <ul>
                <li></li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">服饰鞋包</a>
            <div class="second" style="width: 340px;    height: 350px;    margin-bottom: 100px;">
              <ul>
                <li><span>卫衣+连帽上衣</span></li>
                <li><span>外套</span></li>
                <li><span>衬衫</span></li>
                <li><span>牛仔裤</span></li>
                <li><span>休闲裤</span></li>
                <li><span>短裤</span></li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">美食酒水</a>
            <div class="second" style="width: 340px;    height: 350px;    margin-bottom: 100px;">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">个护清洁</a>
            <div class="second" style="width: 340px;    height: 350px;    margin-bottom: 100px;">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">母婴亲子</a>
            <div class="second" style="width: 340px;    height: 350px;    margin-bottom: 100px;">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">运动旅行</a>
            <div class="second" style="width: 340px;    height: 350px;    margin-bottom: 100px;">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">数码家电</a>
            <div class="second" style="width: 340px;    height: 350px;    margin-bottom: 100px;">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">严选全球</a>
            <div class="second">二级菜单</div>
          </li>
          <li>
            <a href="">为你严选</a>
            <div class="second">二级菜单</div>
          </li>
          <li>
            <a href="">众筹</a>
            <div class="second">二级菜单</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 列表结束 -->

    <!-- 轮播图 -->
    <div class="lunbo">
      <img src="./images/lunbo.webp" alt="俺的图图呢？">
    </div>
    <!-- 轮播图结束 -->

    <!-- 热销榜 -->
    <div class="hot_outer">
      <ul class="hot_goods">
        <li>- 热销榜 -</li>
        <li><img src="./images/全站热销榜.webp" alt=""><span>全站<br>热销榜</span></li>
        <li><img src="./images/1居家生活.webp" alt=""><span>居家<br>生活榜</span></li>
        <li><img src="./images/1服饰鞋包.webp" alt=""><span>服饰<br>鞋包榜</span></li>
        <li><img src="./images/1美食酒水.webp" alt=""><span>美食<br>酒水榜</span></li>
        <li><img src="./images/1数码家电.webp" alt=""><span>数码<br>家电榜</span></li>
        <li><img src="./images/1个护清洁.webp" alt=""><span>个护<br>清洁榜</span></li>
        <li><img src="./images/1运动旅行.webp" alt=""><span>运动<br>旅行榜</span></li>
        <li><img src="./images/1母婴亲子.webp" alt=""><span>母婴<br>亲子榜</span></li>
        <li><img src="./images/1全球特色.webp" alt=""><span>全球<br>特色榜</span></li>
      </ul>
    </div>
    <!-- 热销榜结束 -->

    <!-- 右侧边栏 -->
    <div class="right_aside">
      <ul>
        <li>
          <img src="./img/youce.png" alt="">
        </li>
        <li>
          <div class="title">订阅电子刊</div>
          <div class="content">订阅电子刊。。。</div>
        </li>
        <li>
          <div class="title">在线客服</div>
          <div class="content">在线客服。。。</div>
        </li>
        <li>
          <div class="title">回到顶部</div>
          <div class="content">回到顶部。。。</div>
        </li>
      </ul>
    </div>
    <!-- 右侧边栏结束 -->

    <!-- 人气推荐 -->
    <div class="popularity">
      <div>
          <h3 class="name">人气推荐</h3>
          <div class="headerLeft ">编辑推荐</div>
          <div class="headerLeft checked">热销总榜</div>
          <div class="headerRight">更多推荐</div>
      </div>
      <div class="product">
          <div id="productItemFirst" class="productItem">
              <img src="./images/popular/  (1).jpg" alt="图片走丢了呜呜呜">
          </div>
          <div class="productItem">
              <img src="./images/popular/  (2).jpg" alt="图片走丢了呜呜呜">
          </div>
          <div class="productItem">
              <img src="./images/popular/  (3).jpg" alt="图片走丢了呜呜呜">
          </div>
          <div class="productItem">
              <img src="./images/popular/  (4).jpg" alt="图片走丢了呜呜呜">
          </div>
          <div class="productItem">
              <img src="./images/popular/  (5).jpg" alt="图片走丢了呜呜呜">
          </div>
          <div class="productItem">
              <img src="./images/popular/  (6).jpg" alt="图片走丢了呜呜呜">
          </div>
          <div class="productItem">
              <img src="./images/popular/  (7).jpg" alt="图片走丢了呜呜呜">
          </div>
      </div>
  </div>
    <!-- 人气推荐结束 -->
  </section>
  <!-- 主体结束 -->
  
  <!-- 底部 -->

  <footer>

  </footer>
  <!-- 底部结束 -->
</body>

</html>